<%-- 
    Document   : index
    Created on : Mar 24, 2012, 12:03:17 AM
    Author     : User
--%>

<%@page import="java.text.DecimalFormat"%>
<%@page import="java.text.NumberFormat"%>
<%@page import="com.mfi.models.Product"%>
<%-- Header Area --%>
<%@ include file="/template/header.jsp" %> 
<%-- End of Header Area --%>


<%! DecimalFormat formatter = new DecimalFormat("##,###.00");%>

<%-- Content Area --%>
<h2>Order</h2>
<div style="float: left; width: 620px;">
    <% if (categories != null) {%>
    <div class="categories">
        <%
            Integer category_id = (Integer) request.getAttribute("category_id");
            int i = 0;
        %>
        <ul>
            <% for (Category c : categories) {%>
            <% if ((i == 0 && request.getAttribute("category_id") == null)
                        || (request.getAttribute("category_id") != null) && category_id.intValue() == c.getId()) {%>
            <li><a class="current-category"><%= c.getName()%></a></li>
            <% } else {%>
            <li><a href="?category=<%= c.getId()%>"><%= c.getName()%></a></li>
            <% }
                    i++;
                }%>
        </ul>
        <div class="clear"></div>
    </div>
    <% }%>
    <div>
        <% if (products.size() > 0) {%>
        <div id="slider">
            <% for (Product pl : products) {%>
            <div>
                <table>
                    <tr>
                        <td colspan="3">
                            <!--<img src="/uploads/<%= pl.getId()%>.jpg" width="301" height="181" />-->
                            <img src="/uploads/<%= pl.getImage()%>" width="301" height="181" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <h2><%= pl.getName()%></h2>
                            <p><%= pl.getDescription()%></p>
                        </td>
                    </tr>
                    <tr>
                        <%! DBConnection connection = new DBConnection();
                            ArrayList<Size> sizez = null;%>
                        <% sizez = connection.getAvailableSizes(pl.getId()); %>
                        <% if (sizez != null && pl.getCategory_id() == 1) {%>
                        <th>Size</th>
                        <td>

                            <select class="size-list_<%= pl.getId()%>" rel="<%= pl.getId()%>">
                                <% for (Size s : sizez) {%>
                                <option value="<%= s.getId()%>"><%= s.getName()%>"</option>
                                <% }%>
                            </select>

                        </td>
                        <% } %>
                        <td <%= sizez == null ? "colspan='3'" : "" %> class="order-price">
                            Price: Php <span class="price_<%= pl.getId()%>"><%= formatter.format(pl.getPrice())%></span>
                        </td>
                    </tr>
                    <tr>
                        <th>Quantity</th>
                        <td><input type="text" maxlength="3" size="3" value="1" class="qty_<%= pl.getId()%>" rel="product_<%= pl.getId()%>" /></td>
                        <td>
                            <a class="add-to-cart-btn" href="javascript:void" rel="product_<%= pl.getId()%>">Add to cart</a>
                        </td>
                    </tr>
                </table>
                <input type="hidden" class="h_product_size_<%= pl.getId()%>" value="<%= pl.getCategory_id() == 1 ? sizez.get(0).getId() : 0 %>" />
                <input type="hidden" class="h_product_qty_<%= pl.getId()%>" value="1" />
            </div>
            <% }%>
        </div>
        <div class="order-control">
        <a href="#" class="order-prev">&#171; Prev</a>
        <a href="#" class="order-next">Next &#187;</a>
        <div class="clear"></div>
        </div>
        <% } else { %>
        <p class="no-products">No products found.</p>
        <% } %>
    </div>
</div>
<div style="float: left; margin-left: 10px; width: 240px;">
    <div class="cart">
        <div class="cart-div"></div>
    </div>
</div>
<div class="clear"></div>


<%-- Footer Area --%>
<%@ include file="/template/footer.jsp" %>
<%-- End of Footer Area --%>

<script type="text/javascript" src="/js/cart.js"></script>